<config lang="json">
{
  navigationBarTitleText: '教师中心',
  usingComponents: {

  }
}
</config>

<template>
  <div class="page">
    <div class="teacher-header-warpper page-header-warpper fixed-top d-flex justify-content-center">
      <div class="teacher-header page-header">
        <div class="d-flex teacher-header-content page-header-content">
          <div class="mr-auto d-flex">
            <div class="mr-2 position-relative">
              <img class="big-avatar" :src="$globalData.userInfo.avatarUrl" />
              <img :src="'teacher-icon.png'|imgUrl" class="bottom-left-pos-icon" alt="">
            </div>
            <div class="pl-1">
              <h1>{{$globalData.userInfo.nickName}}</h1>
              <span class="mr-2 font-small">师傅</span>
              <span class="mr-2 font-small">{{user.area}}</span>
              <span class="font-small">{{teacherInfo.job|job}}</span>
            </div>
          </div>
          <div class="mr-2">
            <div class="d-flex">
              <div class="achievement-icon position-relative mr-1"  @click="active = 2">
                <img :src="'achievement-icon.png'|imgUrl" alt="">
                <span>{{teacherInfo.achievementCount}} </span>
              </div>
              <div  class="rank-icon position-relative"  @click="active = 3">
                <img :src="'rank-icon.png'|imgUrl" alt="">
                <span>{{teacherInfo.rank}}</span>
              </div>
            </div>
            <div class="d-flex align-items-center">
              <img :src="'xiaoren-default.png'| imgUrl" style="width:17px;height:16px;" />
              <span>累计收徒:{{teacherInfo.studentNum}}人</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="teacher-body page-body">
      <div class="tab-item" v-if="isShowTab(0)">
        <TeacherCurrent></TeacherCurrent>
      </div>
      <div class="tab-item" v-if="isShowTab(1)">
        <TeacherStudentList :contentHeight="contentHeight"></TeacherStudentList>
      </div>
      <div class="tab-item" v-if="isShowTab(2)">
        <TeacherAchievement></TeacherAchievement>
      </div>
      <div class="tab-item" v-if="isShowTab(3)">
        <TeacherRank></TeacherRank>
      </div>
    </div>

    <van-tabbar :active="active" @change="onChange" active-color="#FF790C" custom-class="custom-tab-bar">
      <van-tabbar-item>
        <image slot="icon" :src="'tabbar/current-default.png'|imgUrl" mode="aspectFit" />
        <image slot="icon-active" :src="'tabbar/current-active.png'|imgUrl" mode="aspectFit" />
        {{barTitles[0]}}
      </van-tabbar-item>
      <van-tabbar-item>
        <image slot="icon" :src="'tabbar/huigu-default.png'|imgUrl" mode="aspectFit" />
        <image slot="icon-active" :src="'tabbar/huigu-active.png'|imgUrl" mode="aspectFit" />
        {{barTitles[1]}}
      </van-tabbar-item>
      <van-tabbar-item>
        <image slot="icon" :src="'tabbar/chengjiu-default.png'|imgUrl" mode="aspectFit" />
        <image slot="icon-active" :src="'tabbar/chengjiu-active.png'|imgUrl" mode="aspectFit" />
        {{barTitles[2]}}
      </van-tabbar-item>
      <van-tabbar-item>
        <image slot="icon" :src="'tabbar/paihang-default.png'|imgUrl" mode="aspectFit" />
        <image slot="icon-active" :src="'tabbar/paihang-active.png'|imgUrl" mode="aspectFit" />
        {{barTitles[3]}}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Getter, Action } from 'vuex-class'
import { AppUser } from '../utils/GlobalData'

import TeacherAchievement from './pages/achievement/index.vue'
import TeacherCurrent from './pages/current/index.vue'
import TeacherStudentList from './pages/studentlist/index.vue'
import TeacherRank from './pages/rank/index.vue'

@Component({
  components: {
    TeacherAchievement,
    TeacherCurrent,
    TeacherStudentList,
    TeacherRank
  }
})
export default class TeacherIndex extends Vue {
  @Action getTeacherRank;
  @Action getTeacherInfo;

  @Action updateTeacherTask;
  public get user (): AppUser {
    return this.$globalData.appUser
  }

  public get teacherInfo () {
    return this.$store.state.teacher.teacherInfo
  }
  public active = 0;
  public barTitles = ['当前', '徒弟', '成就', '排名'];
  public async created () {
    await this.getTeacherInfo()
    this.$globalData.updateTask = this.updateTask
  }
  public updateTask (task) {
    this.updateTeacherTask({
      taskId: task.id,
      studentId: task.studentId,
      status: task.status,
      score: task.score
    })
  }

  public onShow () {
    this.computeScrollViewHeight()
  }
  public contentHeight;
  public computeScrollViewHeight () {
    let that = this
    let query = wx.createSelectorQuery()
    let windowHeight = wx.getSystemInfoSync().windowHeight
    query.select('.page-header-warpper').boundingClientRect(function (res) {
      that.contentHeight = windowHeight - res.bottom - 10 - 30 - 10 - 10 - 10 - 50
    }).exec()
  }

  public isShowTab (index) {
    return this.active === index
  }
  public async onChange (event) {
    this.active = event.detail
    Megalo.setNavigationBarTitle({ title: this.barTitles[event.detail] })
  }

  public async onReachBottom () {
    if (this.active !== 3) {
      return
    }
    Megalo.showLoading({
      title: '加载中'
    })
    await this.getTeacherRank()
    Megalo.hideLoading()
  }
}
</script>

<style lang="stylus" >

.teacher-header-warpper {
  width: 100%;
  height:$teacherHeaderHeight;
  background: no-repeat url($cdn + 'teacher-header-bg.png') #f7f7f7 center;
  background-size: 100% 100%;
  color: #fff;
}
.teacher-body {
  padding: $teacherHeaderHeight 0px $tabbarHeight 0px;
}
</style>
